<template>
    <div class="allBox">
            <!-- 功能选择区 -->
            <div class="selection">
            <div @click="refresh(1)">
                <el-button type="info"><el-icon><RefreshRight /></el-icon></el-button>
            </div>
        </div>
        <!-- table -->
        <div class="table_box">
        <el-table  ref="ref_multipleTableRef" :data="tableData"  height="88vh" @row-dblclick="db_Click"> <!--单击 和 双击 && 单选 和全选 -->
            <el-table-column type="selection" width="50" align="left" />
            <el-table-column label="序号" width="80" type="index" align="left" sortable=""/>
            <el-table-column prop="username" label="姓名" width="180" align="left"/>
            <el-table-column label="类型" width="180" align="left">医生</el-table-column>
            <el-table-column prop="today" label="今日签到" width="180" />
            <el-table-column prop="yesterday" label="昨日签到" width="180" />
            <el-table-column prop="status" label="状态" width="180" />
            <!-- <el-table-column label="状态" width="180" align="left">
                <template #default="scope"> 
                    <div>
                        {{ tableData[scope.$index].today != '未签到'? '今日已签到': '未签到' }}
                    </div>
                </template>

            </el-table-column> -->
        </el-table>
        </div>
          <!-- form表单 -->
          <el-dialog
            v-model="dialogVisible"
            title="编辑表单"
            draggable
            width="35%">
            <el-form :model="form" class="demo-ruleForm" v-loading="loading" size="large">

            <el-form-item required label="公告内容" label-width="150px">
                <el-input v-model="form.title" type="textarea" rows="4" autocomplete="off" placeholder="只能修改公告内容" />
            </el-form-item>

            <el-form-item required label="创建日期" label-width="150px">
                <el-date-picker
                    v-model="form.date"
                    style="width: 100%;margin-bottom: 20px;"
                    type="date"
                    placeholder="选择项目的创建日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>

            </el-form>
        <template #footer>
            <span class="dialog-footer">
            <el-button type="primary" @click="updateAPI()" style="width: 80%;margin-right: 8%;height: 40px;">
                修改
            </el-button>
            </span>
        </template>
        </el-dialog>

        <messageComp ref="ref_messageComp"> </messageComp>
    </div>
  
</template>

<script setup>
import axios from "axios"
import { ref,getCurrentInstance } from "vue"
import { useStore } from "vuex";
import messageComp from "../components/messageComp.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
const store = useStore()
const { ctx } = getCurrentInstance()
let windowsHeight = ref((window.innerHeight-60) + 'px')
// 数据
let loading = ref(false) //加载
let dialogVisible = ref(false) //表单开关
let form = ref({}) //表单数据 el-form
let tableData = ref([]) //表格数据-el-table


//双击修改   
const db_Click = (e)=>{
    dialogVisible.value = true
    form.value = e
}
const updateAPI = () =>{
    dialogVisible.value = false
    // console.log(form.value);
    axios({
        method:'post',
        url:store.state.url + '/dates/update',
        data:form.value,
    }).then(res=>{
        if (res.data.code == 200) {
            ref_messageComp.value.messageSuccess('您更新了一条记录')
            refresh()
        }else{
            ref_messageComp.value.messageFail('更新失败')
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}

// 获取数据列表
const getData = ()=>{
    axios({
        url:store.state.url + '/dates'
    }).then(res=>{
        console.log(res);
        if (res.data.code == 200) {
            let arr = res.data.data
            tableData.value = arr
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
const getUserData = ()=>{

    axios({
        url:store.state.url + '/users'
    }).then(res=>{
        console.log(res);

        if (res.data.code == 200) {
            tableData.value = []
            let arr = res.data.data
            // 寻找类型为医生用户的数据
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].type == '医生') {
                    let obj = Object.assign({}, arr[i])
                    obj.workDate = arr[i].workDate.split('-')
                    tableData.value.push(obj)
                }
            }
            // let arr = res.data.data.filter(item=>item.type == '医生') 
            // tableData.value = arr

        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })


}
// 刷新
const refresh = (n)=>{
    if (n) {
        ref_messageComp.value.messageSuccess('刷新成功')
    }
    getData()
}
const add = ()=>{
    form.value = {}
    dialogVisible.value = true
    btn_text.value = '添加'

}
// 执行区
refresh()
</script>


<style scoped>
.allbox{
    position: absolute;
    top: 0%;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    color: black;
    border-radius: 10px;
    /* border: 1px solid ; */
}
.selection{
    margin: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    /* border: 2px solid; */
    display: flex;

}
.selection>div{
    width: 70px;
    height: 100%;
    margin-left: 10px;
    border-radius: 5px;
}
/* 刷新 */
.selection>div:nth-child(1){
    margin-left: 40px;
}

.datetime{
    width: 100%;
    height: 40px;
    text-align: left;
    letter-spacing: 1px;
    color: gray;
    /* border: 2px solid #ccc; */
}


</style>